<template>
  <div class="category-search flex v-align-c bgc-white">
    <div class="sort">
      <el-button class="button" v-for="item in sortData" :key="item.conditionColumn"
        :class="currentSelectedSort.conditionColumn === item.conditionColumn ? 'actived' : ''" @click="sortEls(item.conditionColumn)">
        <div class="flex v-align-c">
          <div>{{ item.name }}</div>
          <div class="pad-l-3 pad-r-3" v-if="item.sort">
            <div class="height-20 sort-icon flex v-align-b"
              :class="currentSelectedSort.conditionColumn === item.conditionColumn && currentSelectedSort.sort === 'desc' ? 'actived' : ''">
              <el-icon color="#bbbbbb" :size="12" class="cursor-p">
                <caret-top />
              </el-icon>
            </div>
            <div class="height-20 sort-icon flex v-align-t"
              :class="currentSelectedSort.conditionColumn === item.conditionColumn && currentSelectedSort.sort === 'asc' ? 'actived' : ''">
              <el-icon color="#bbbbbb" :size="12" class="cursor-p">
                <caret-bottom />
              </el-icon>
            </div>
          </div>
        </div>
      </el-button>
    </div>
    <!-- <div class="v-align-c search-form">
      <div class="position-r">
        <div class="tag-price">￥</div>
        <el-input v-model="queryParams.minPrice" class="input" placeholder="最低价" />
      </div>
      <div class="line position-r mar-l-12 mar-r-12" />
      <div class="position-r">
        <div class="tag-price">￥</div>
        <el-input v-model="queryParams.maxPrice" class="input" placeholder="最高价" />
      </div>
      <el-button class="button mar-l-20" @click="handleSearch">搜索</el-button>
    </div> -->
    <div class="flex-item" />
    <div class="flex v-align-c pad-r-22">
      <el-icon color="#bbbbbb" :size="14" class="mar-r-5 cursor-p">
        <arrow-left />
      </el-icon>
      <div class="font-14"><span class="font-current-page">{{ pageIndex }}</span>/{{totalPage}}</div>
      <el-icon color="#bbbbbb" :size="14" class="mar-r-5 cursor-p">
        <arrow-right />
      </el-icon>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    reactive
  } from 'vue'
  import {
    CaretTop,
    CaretBottom,
    ArrowLeft,
    ArrowRight
  } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'GoodsSortSearch',
    components: {
      CaretTop,
      CaretBottom,
      ArrowLeft,
      ArrowRight
    },
    props: {
      pageIndex: Number,
      totalPage: Number
    },
    setup(props, context) {
      const sortData = ref([])
      const currentSelectedSort = ref()
      const queryParams = reactive({
        'conditionColumn': 'comprehensive',
        'sort': 'asc',
        'minPrice': '',
        'maxPrice': ''
      })

      onMounted(() => {
        currentSelectedSort.value = {
          'conditionColumn': 'comprehensive',
          'sort': 'asc'
        }

        sortData.value = [{
            'name': '综合',
            'conditionColumn': 'comprehensive',
            'sort': ''
          },
          {
            'name': '销量',
            'conditionColumn': 'saleNum',
            'sort': 'asc'
          },
          {
            'name': '等级',
            'conditionColumn': 'virtualLevel',
            'sort': 'asc'
          },
          {
            'name': '上新',
            'conditionColumn': 'updateTime',
            'sort': 'asc'
          }
        ]
      })
      const sortEls = (conditionColumn: any) => {
        if (currentSelectedSort.value.conditionColumn === conditionColumn) {
          if (conditionColumn !== 'comprehensive') {
            currentSelectedSort.value.sort = currentSelectedSort.value.sort === 'asc' ? 'desc' : 'asc'
          } else {
            currentSelectedSort.value.sort = 'asc'
          }
        } else {
          currentSelectedSort.value.conditionColumn = conditionColumn
          currentSelectedSort.value.sort = 'asc'
        }
        if (conditionColumn === 'comprehensive') {
          queryParams.conditionColumn = ''
          queryParams.sort = 'asc'
        } else {
          queryParams.conditionColumn = currentSelectedSort.value.conditionColumn
          queryParams.sort = currentSelectedSort.value.sort
        }
        context.emit('handleSearch', queryParams.sort,queryParams.conditionColumn)
      }

      const handleSearch = () => {
        context.emit('handleSearch', queryParams.sort,queryParams.conditionColumn)
      }

      return {
        sortEls,
        handleSearch,
        queryParams,
        currentSelectedSort,
        sortData
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .category-search {
    .sort {
      ::v-deep(.cascader) {
        line-height: 46px;
        width: 130px;

        .el-input__inner {
          border-radius: 0;
          border: none;
          height: 46px;
          line-height: 46px;
        }

        .el-input__suffix {
          top: 3px;
        }

        .el-input.is-focus {
          .el-input__inner {
            background: $darkBlue;
            color: #fff;
          }

          .el-input__suffix {
            color: #fff;
          }
        }
      }

      ::v-deep(.button) {
        color: #666;
        font-size: 14px;
        border-radius: 0;
        border: #fff 1px solid;
        min-width: 78px;
        height: 46px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;

        &:hover {
          color: #fff;
          background: $darkBlue;
          border: $darkBlue 1px solid;

          .el-icon {
            color: #fff;
          }
        }

        &:focus {
          color: #666;
          background: #fff;
          border: #fff 1px solid;

          .el-icon {
            color: #bbb;
          }
        }

        &.actived {
          color: #fff;
          background: $darkBlue;
          border: $darkBlue 1px solid;

          .el-icon {
            color: #fff;
          }
        }

        .sort-icon {
          &.v-align-b {
            .el-icon {
              margin-bottom: -3px;
            }
          }

          &.v-align-t {
            .el-icon {
              margin-top: -3px;
            }
          }

          &.actived {
            i {
              color: $darkBlue;
            }
          }
        }
      }
    }

    .search-form {
      margin-left: 56px;

      .position-r {
        .tag-price {
          position: absolute;
          left: 10px;
          top: 50%;
          margin-top: -9.5px;
          font-size: 14px;
          z-index: 10;
          color: #666;
        }
      }

      .line {
        &:after {
          content: '';
          display: block;
          width: 16px;
          height: 1px;
          background: #e5e5e5;
          left: 0;
          top: 50%;
        }
      }

      ::v-deep(.input) {
        --el-input-border-radius: 0;
        width: 78px;
        opacity: 1;
        transition: none;

        .el-input__inner {
          background: #f9f9f9;
          border-color: #e5e5e5;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          padding-left: 22px;
          padding-right: 12px;
        }

        .el-input__inner:hover {
          border-color: #e5e5e5;
        }

        ::-webkit-input-placeholder {
          color: #666666;
        }

        ::-moz-placeholder {
          color: #666666;
        }
      }

      ::v-deep(.button) {
        color: #fff;
        background: $darkBlue;
        font-size: 14px;
        border: $darkBlue 1px solid;
        width: 68px;
        height: 30px;
        min-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 2px;

        &:hover {
          color: #fff;
          background: $darkBlue;
          border: $darkBlue 1px solid;
        }
      }
    }
  }
</style>
